<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <style>
        body{
            background-color: #2980b9;
            font: 14px/22px "Microsoft YaHei",Verdana,Arial;
        }
        .my-container{
            margin: 150px auto;
            height:450px;
            width: 600px;
            background-color: #fff;
            box-shadow: gray 0px 10px 10px;
            border-radius: 25px;
            opacity:0.9;
        }

        .box{
           padding-top: 100px;
            height: 100%;
            width: 100%;
        }

    </style>
</head>
<body>
    <div class="my-container">
        <div class="box">
            <h2 style="text-align: center;padding-bottom: 32px">校园信息门户系统</h2>
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">账号:</label>
                    <div class="layui-input-block" style="padding-right: 160px">
                        <input type="text" id="account" value="" required  lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码:</label>
                    <div class="layui-input-block" style="padding-right: 160px">
                        <input type="password" id="password" value="" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">身份:</label>
                    <div class="layui-input-block">
                        <input type="radio" name="role" value="1" title="管理员" checked>
                        <input type="radio" name="role" value="2" title="教师">
                        <input type="radio" name="role" value="3" title="学生">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div style="padding-left: 60px;width: 386px;display: inline-block">
                        <a id="login" class="layui-btn" lay-submit lay-filter="formDemo" style="width: 100%">登录</a>
                    </div>
                </div>
            </form>
        </div>

    </div>

<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['jquery'], function () {
        let $ = layui.jquery;


        // 登录操作
        var action ={
            adminLogin(account,password){
                $.post('/adminLogin',{'account':account,'password':password},response=>{
                    this.callback(response);
                })
            },
            teacherLogin(account,password){
                $.post('/teacherLogin',{'account':account,'password':password},response=>{
                    this.callback(response);
                })
            },
            studentLogin(account,password){
                $.post('/studentLogin',{'account':account,'password':password},response=>{
                    this.callback(response);
                })
            },
            callback(response){
                if (response.code==='200'){
                    // 登录成功
                    location.href = "/"
                }else {
                    // 登录失败
                    layer.msg(response.msg);
                }

            }
        }

        // 执行登录
        $("#login").click(()=>{
            let account = $("#account").val();
            let password = $("#password").val();
            let role = $("input[name='role']:checked").val();
            if (role==='1'){
                // 管理员登录
                action.adminLogin(account,password);
            }else if (role==='2'){
                // 教师登录
                action.teacherLogin(account,password);
            }else {
                // 学生登录
                action.studentLogin(account,password);
            }
        })
    })
</script>
</body>
</html>